<template>
    <el-main>
      <el-row>
        <el-descriptions title="项目互评" border :column="1" class="descriptions"> 
          <el-descriptions-item label="任务标题">{{ data.title }}</el-descriptions-item>
          <el-descriptions-item label="任务描述">{{ data.description }}</el-descriptions-item>
          <el-descriptions-item label="未完成互评的同学，项目得分变更为原来的">{{ data.nograde }}%</el-descriptions-item>
        </el-descriptions>
      </el-row>
  
      <el-row>
        <el-table :data="mutualgrades" class="table">
          <el-table-column prop="p_name" label="项目名">
            <template #default="{ row }">
              <a href="" class="project-link">{{ row.p_name }}</a>
            </template>
          </el-table-column>
          <el-table-column prop="score" label="分数">
            <template #default="{ row }">
              {{ row.score !== null ? row.score : '未评分' }}
            </template>
          </el-table-column>
          <el-table-column label="评分">
            <template v-slot="scope">
              <el-button :disabled="isend" @click="grade(scope.row)" class="grade-button"> 
                {{ buttext }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
    </el-main>
    <el-dialog v-model="show" width="30%">
        <el-form>
            <el-form-item label="输入分数">
                <el-input type="number" v-model="scorenum" :min="0" :max="100"></el-input>
            </el-form-item>
            <el-button @click="gradeproject">确定</el-button>
            <el-button @click="show = false">取消</el-button>
        </el-form>
    </el-dialog>
  </template>
  

  <style scoped>
  .descriptions {
    width: 80%;
    margin-bottom: 20px;
  }
  
  .table {
    width: 100%;
    margin-top: 20px;
  }
  
  .project-link {
    color: #409eff;
    text-decoration: none;
  }
  
  .project-link:hover {
    text-decoration: underline;
  }
  
  .grade-button {
    background-color: #10dbf1;
    border-color: #5cd9dd;
    color: white;
  }
  
  .grade-button:disabled {
    background-color: #c0c4cc;
    border-color: #c0c4cc;
  }
  </style>

<script setup>
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { onMounted,ref } from 'vue';
import { useRoute } from 'vue-router';
let data = ref([])
let mutualgrades = ref([])
let isend = ref(false)
let buttext = ref('评分')
let show = ref(false)
let scorenum = ref()
onMounted(() =>{
    data.value = history.state
    console.log(data.value)
    isend.value = data.value.isend
    if(isend.value)
        buttext.value = '已截止'
    const tid = data.value.id
    axios.get('http://localhost:8080/mutualgrade/getgradetaskbysid', 
    {params: {sid:1,tid:tid}})
    .then((res) => {
        console.log(res.data)
        mutualgrades.value = res.data
    })
    .catch((err) => {
        console.log(err)
    })
})

let theid = ref()
const grade = (row) => {
    console.log(row)
    show.value = true
    theid.value = row.id
}

const gradeproject = () => {
    if(Number.isInteger(scorenum.value)||scorenum.value > 100 || scorenum.value <= 0){
        ElMessage({
          message:'输入错误',
          type:'error'
        })
        scorenum.value = null
    }
    else{
        axios.get("http://localhost:8080/mutualgrade/studentgradeproject",
        {params:{
            score:scorenum.value,
            id:theid.value
        }}).then((res) => {
            if(res.data){
              ElMessage({
                message:'评分成功',
                type:'success'
              })
              setTimeout(() => {
                location.reload()
              },500)
              
            }
        })
        .catch((err) => {
            console.log(err);
        })
    }
}

</script>

